<template>
  <el-dialog title="Add Wifi" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
    <el-form :model="wifiInfo" label-width="120px" :rules="formRules" ref="formRef">
      <el-form-item label="Name" prop="name">
        <el-input v-model="wifiInfo.name" placeholder="wifi name"></el-input>
      </el-form-item>
      <el-form-item label="MAC" prop="macAddress">
        <el-input v-model="wifiInfo.macAddress" placeholder="For example: 7c:b5:9b:34:2e:a2"></el-input>
      </el-form-item>
      <el-form-item label="state" prop="state">
        <el-switch :active-value="1" :inactive-value="0" v-model="wifiInfo.state" active-color="#ABC270" inactive-color="#8C8C8C"></el-switch>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button @click="handleClose">Cancel</el-button>
      <div style="display: inline-block; width: 50px"></div>
      <el-button type="primary" @click="handleSubmit">Submit</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "addWifi",
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
  },
  data(){
    var checkMAC = (rule, value, callback) => {
      if(!value) {
        return callback(new Error('MAC Address is required'));
      } else {
        const reg = /(([a-f0-9]{2}:){5})[a-f0-9]{2}/gi;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('Please enter the correct MAC Address'));
        }
      }
    }
    return {
      dialogVisible: this.isShow,
      wifiInfo: {
        name: '',
        macAddress: '',
        state: 0,
      },
      formRules: {
        name: [
          { required: true, message: 'Wifi name is required', trigger: 'blur' },
        ],
        macAddress: [
          { required: true, validator: checkMAC, trigger: 'blur' },
        ],
        state: [
          { required: true, message: 'state is required', trigger: 'blur' },
        ],
      }
    }
  },
  watch: {
    isShow(val){
      this.dialogVisible = val;
    }
  },
  created(){

  },
  mounted(){
    this.staffData = JSON.parse(sessionStorage.getItem('staffData'));
    this.department = JSON.parse(sessionStorage.getItem('department'));
  },
  methods: {
    handleClose() {
      const _this = this;
      _this.dialogVisible = false;
      _this.$emit('handleClose');
      //清空表单和表单验证error
      _this.$nextTick(() => {
        _this.$refs.formRef.resetFields();
      })
      // 清空表单
      Object.keys(_this.wifiInfo).forEach(((value) => {
        _this.wifiInfo[value] = '';
      }))
      _this.wifiInfo.state=0;
    },
    handleSubmit(){
      const _this=this;
      _this.$refs.formRef.validate(valid => {
        if(!valid) return;
        _this.$api.setting.addWifi(_this.wifiInfo).then(res => {
          if(res.data.code===2000){
            _this.handleClose();
            _this.$message.success("Add success");
          }else{
            _this.$message.error(res.data.message);
          }
        }).catch(err => {
          console.log(err);
        })
      })
    },
  }
}
</script>

<style scoped>
  .el-input {
    width: 305px;
  }
  .button {
    text-align: center;
    padding-top: 15px;
  }
  /* /deep/ .el-icon-close {
    font-size: 20px;
  } */
</style>
